<!--阿里云配置-->
<template>
  <div class="ele-body">
    <el-row :gutter="15">
      <el-col :span="24">
        <el-card shadow="never"
                 body-style="padding: 0;">
          <el-tabs v-model="active"
                   @tab-click="handleClick"
                   class="user-info-tabs">
            <el-tab-pane label="微信"
                         name="1">
              <el-form ref="wxForm"
                       :model="wxForm"
                       :rules="rules"
                       label-width="180px"
                       style="max-width: 650px; padding: 34px 20px 0 20px"
                       @keyup.enter.native="save"
                       @submit.native.prevent>

                <el-form-item label="微信appid:"
                              prop="appid">
                  <el-input v-model="wxForm.appId"
                            placeholder="请输入微信appid"
                            clearable />
                </el-form-item>

                <el-form-item label="APIv2密钥:"
                              prop="appV2Key">
                  <el-input v-model="wxForm.appV2Key"
                            placeholder="请输入APIv2密钥"
                            clearable />
                </el-form-item>
                <el-form-item label="APIv3密钥:"
                              prop="appV3Key">
                  <el-input v-model="wxForm.appV3Key"
                            placeholder="请输入APIv3密钥"
                            clearable />
                </el-form-item>
                <el-form-item label="商户号:"
                              prop="merchantNo">
                  <el-input v-model="wxForm.merchantNo"
                            placeholder="请输入商户号"
                            clearable />
                </el-form-item>
                <el-form-item label="证书序列号:"
                              prop="merchantSerialNumber">
                  <el-input v-model="wxForm.merchantSerialNumber"
                            placeholder="请输入证书序列号"
                            clearable />
                </el-form-item>
                <el-form-item label="微信服务器地址:"
                              prop="domain">
                  <el-input v-model="wxForm.domain"
                            placeholder="请输入微信服务器地址"
                            clearable />
                </el-form-item>
                <el-form-item label="私钥:"
                              prop="privateKeyPath">
                  <el-input v-model="wxForm.privateKeyPath"
                            placeholder="请输入私钥"
                            clearable />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary"
                             :loading="loading"
                             @click="save('wxForm')">
                    {{maskerValueWx=='1'?'保存新增':'保存更改' }}
                  </el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="支付宝"
                         name="2"
                         v-model="active">
              <el-form ref="zfbForm"
                       :model="zfbForm"
                       :rules="rules"
                       label-width="180px"
                       style="max-width: 650px; padding: 34px 20px 0 20px"
                       @keyup.enter.native="save"
                       @submit.native.prevent>

                <el-form-item label="支付宝appid:"
                              prop="alipayAppid">
                  <el-input v-model="zfbForm.alipayAppid"
                            placeholder="请输入支付宝appid"
                            clearable />
                </el-form-item>
                <el-form-item label="支付宝公钥:"
                              prop="alipayPublicKey">
                  <el-input v-model="zfbForm.alipayPublicKey"
                            placeholder="请输入支付宝公钥"
                            clearable />
                </el-form-item>
                <el-form-item label="应用公钥:"
                              prop="appPublicKey">
                  <el-input v-model="zfbForm.appPublicKey"
                            placeholder="请选择应用私钥"
                            clearable />
                </el-form-item>
                <el-form-item label="应用私钥:"
                              prop="appPrivateKey">
                  <el-input v-model="zfbForm.appPrivateKey"
                            placeholder="请选择应用私钥"
                            clearable />
                </el-form-item>

                <el-form-item label="支付宝网关:"
                              prop="alipayUrl">
                  <el-input v-model="zfbForm.alipayUrl"
                            placeholder="请输入支付宝网关"
                            clearable />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary"
                             :loading="loading"
                             @click="save('zfbForm')">
                    {{maskerValueZfb=='1'?'保存新增':'保存更改' }}
                  </el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
	
	<script>
import { addPayparameter, getPayparameter } from '@/api/system/serviceProxyConfig'

export default {
  name: "index",
  data () {
    return {
      matchedProps: {},
      loading: false,
      active: '1', // tab页选中

      //支付类型 1 微信 2 支付宝
      wxForm: {
        appId: '',    //appid
        appV3Key: '',   //APIv3密钥
        appV2Key: '',   //APIv2密钥
        merchantNo: '',    //商户号
        merchantSerialNumber: '',  //证书序列号
        privateKeyPath: '',    //私钥
        domain: '',   //微信服务器地址
        payType: '',//支付类型 1 微信 2 支付宝
        markers: '',
        id: ''

      },
      zfbForm: {
        alipayAppid: '',    //支付宝appid
        alipayPublicKey: '',    //支付宝公钥
        appPublicKey: '',   //应用公钥
        appPrivateKey: "",    //应用私钥
        alipayUrl: '',    //支付宝网关
        payType: '',  //支付类型 1 微信 2 支付宝
        markers: '',
        id: ''
      },
      // 表单验证规则
      rules: {
        appId: [
          {
            required: true,
            message: '请输入微信appid',
            trigger: 'blur'
          }
        ],
        appV3Key: [
          {
            required: true,
            message: '请输入微信APIv3密钥',
            trigger: 'blur'
          }
        ],
        appV2Key: [
          {
            required: true,
            message: '请输入微信APIv2密钥',
            trigger: 'blur'
          }
        ],
        merchantNo: [
          {
            required: true,
            message: '请输入微信商户号',
            trigger: 'blur'
          }
        ],
        merchantSerialNumber: [
          {
            required: true,
            message: '请输入微信证书序列号',
            trigger: 'blur'
          }
        ],
        privateKeyPath: [
          {
            required: true,
            message: '请输入微信私钥',
            trigger: 'blur'
          }
        ],
        domain: [
          {
            required: true,
            message: '请输入微信服务器地址',
            trigger: 'blur'
          }
        ],
        alipayAppid: [
          {
            required: true,
            message: '请输入支付宝appid',
            trigger: 'blur'
          }
        ],
        alipayPublicKey: [
          {
            required: true,
            message: '请输入支付宝公钥',
            trigger: 'blur'
          }
        ],
        appPrivateKey: [
          {
            required: true,
            message: '请输入支付宝应用私钥',
            trigger: 'blur'
          }
        ],
        alipayUrl: [
          {
            required: true,
            message: '请输入支付宝网关',
            trigger: 'blur'
          }
        ],
        appPublicKey: [
          {
            required: true,
            message: '请输入应用公钥',
            trigger: 'blur'
          }
        ]

      },

      // 标识
      markers: '',
      maskerValue: '',
      maskerValueWx: '',
      maskerValueZfb: ''
    }
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created () {
    this.wxForm.payType = this.active;
    this.zfbForm.payType = this.active;

    // if (localStorage.getItem('wxMarkers') == null) {
    //   localStorage.setItem('wxMarkers', JSON.stringify({
    //     masker: '1',
    //     id: ''
    //   }))

    // }
    // if (localStorage.getItem('zfbMarkers') == null) {
    //   localStorage.setItem('zfbMarkers', JSON.stringify({
    //     masker: '1',
    //     id: ''
    //   }))
    // }
    // this.markers = localStorage.getItem('zfbMarkers')
    this.init()
    // this.loadMaskerValue()
  },
  methods: {
    // loadMaskerValue () {
    //   const wxMasker = JSON.parse(localStorage.getItem('wxMarkers'));
    //   this.maskerValueWx = wxMasker ? wxMasker.masker : '';
    //   console.log(this.maskerValueWx)
    //   const zfbMasker = JSON.parse(localStorage.getItem('zfbMarkers'));
    //   this.maskerValueZfb = zfbMasker ? zfbMasker.masker : '';
    //   console.log(this.maskerValueZfb)
    // },
    findMatchingProperties (obj1, obj2) {

      console.log(obj1, obj2)
      for (const prop in obj2) {
        if (obj1.hasOwnProperty(prop)) {
          obj2[prop] = obj1[prop];
        }
      }
      console.log(obj2)
      obj2.payType == '1' ? this.wxForm : this.zfbForm = obj2;
    },

    init () {
      // JSON.parse(localStorage.getItem('wxMarkers')).id &&
      if (this.active == '1') {
        getPayparameter({
          //   id: JSON.parse(localStorage.getItem('wxMarkers'))?.id
          payType: this.active
        })
          .then((res) => {
            console.log(this.active)
            if (res.data) {
              this.maskerValueWx = '2'

              this.findMatchingProperties(res.data, this.wxForm)
              this.wxForm.markers = '2'

            } else {
              this.maskerValueWx = '1'
              this.wxForm.markers = '1'
            }

          })
          .catch((e) => {
            this.$message.error(e);
          });
      }
      if (this.active == '2') {
        getPayparameter({
          //   id: JSON.parse(localStorage.getItem('zfbMarkers'))?.id
          payType: this.active
        })
          .then((res) => {
            console.log(this.active)
            if (res.data) {
              this.maskerValueZfb = '2'

              this.findMatchingProperties(res.data, this.zfbForm)
              this.zfbForm.markers = '2'
            } else {
              this.maskerValueZfb = '1'
              this.zfbForm.markers = '1'
            }

          })
          .catch((e) => {
            this.$message.error(e);
          });
      }
    },
    handleClick (tab) {
      console.log(tab.name);

      this.active = tab.name
      this.init()
      this.wxForm.payType = this.active;
      this.zfbForm.payType = this.active;
    },
    save (formName) {

      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.loading = true;
        const sumbitForm = this.active == '2' ? this.zfbForm : this.wxForm
        const from = { ...sumbitForm, }

        addPayparameter(from)
          .then((res) => {
            // console.log(res)
            this.$message.success(res.msg)
            // if (this.active == '1') {
            //   localStorage.setItem('wxMarkers', JSON.stringify({
            //     masker: '2',
            //     id: res.data
            //   }))
            // } else {
            //   localStorage.setItem('zfbMarkers', JSON.stringify({
            //     masker: '2',
            //     id: res.data
            //   }))
            // }

            this.init()
            this.loading = false;
            // 调用改变按钮(新增修改)的状态
            // this.loadMaskerValue()
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e);
          });
      });
    },
  }
}
	</script>
	
	<style lang="scss" scoped>
/* tab 页签 */
.user-info-tabs {
  :deep(.el-tabs__nav-wrap) {
    padding-left: 24px;
  }

  :deep(.el-tabs__item) {
    height: 50px;
    line-height: 50px;
    font-size: 15px;
  }
}
</style>
	